

<template>
<div>
  <div><h1>{{flag}}</h1></div>
  <el-steps class="goCenter" width="800px" :active="active" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
  </el-steps>

<!--  第一步-->
  <div v-if="active===1">
    <el-form ref="thrFirstForm" :model="thrFirstForm" label-width="100px" style="margin-top: 20px">
      <el-form-item label="选择商品" prop="name">
        <div class="spq">
          <div v-if="proImageUrl!=''">
            <img :src="proImageUrl" alt="Image" style="width: 100px; height: 100px;" />
          </div>
          <div class="proIcBox" @click="proIcBoxOnclick()">
            <i  class="el-icon-shopping-bag-2 el-icon"> </i>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>


<!--  第二步-->
  <div v-if="active===2">
    <el-form ref="theBigForm" :model="theBigForm" label-width="100px" style="margin-top: 20px">
      <el-form-item label="商品主图" prop="img">
        <template slot-scope="scope">
          <img :src="proImageUrl" alt="不要跳过第一步" style="width: 50px;height: 50px">
        </template>
      </el-form-item>


<!--      <el-form-item label="商品轮播图">-->
<!--        <template slot-scope="scope">-->
<!--          <div class="imgbox" v-for="(imageUrl, index) in showItemList" :key="index">-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-form-item>-->


      <el-form-item label="商品标题" prop="name">
        <el-input v-model="theSecondForm.shopName"/>
      </el-form-item>

      <el-form-item label="用户兑换数量限制" prop="canGetNum">
        <el-input v-model="theBigForm.canGetNum"/>
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-input  v-model="theSecondForm.unit"/>
      </el-form-item>

      <el-form-item label="排序" prop="weight">
        <el-input v-model="theSecondForm.weight"/>
      </el-form-item>


      <el-form-item label="上架状态" prop="status">
          <el-radio v-model="theSecondForm.shopStatus" :label="1">开启</el-radio>
          <el-radio v-model="theSecondForm.shopStatus" :label="2">关闭</el-radio>
      </el-form-item>

      <el-form-item label="热门推荐" prop="isHot">
        <template slot-scope="scope">
          <el-radio v-model="theBigForm.isHot" :label="1">开启</el-radio>
          <el-radio v-model="theBigForm.isHot" :label="2">关闭</el-radio>
        </template>
      </el-form-item>



      <el-form-item label="规格选择">
        <el-table
          :data="speList"
          style="width: 100%">
          <el-table-column prop="specificationId" width="30">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="theBigForm.specificationId" @input="checkspeListId(scope.row)"></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="id"
          width="50">
          </el-table-column>
          <el-table-column
            prop="specificationGoods"
            label="属性名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="statsName"
            label="规格名称"
            width="180">
          </el-table-column>
          <el-table-column label="兑换积分">
            <template slot-scope="scope">
              <el-input v-model="scope.row.needPoints"></el-input>
            </template>
          </el-table-column>


          <el-table-column label="限量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sillSum"></el-input>
            </template>
          </el-table-column>

        </el-table>
      </el-form-item>

    </el-form>
  </div>


<!--  第三个-->
  <div v-if="active===3">

    <quill-editor  v-model="this.fuckyou"></quill-editor>

  </div>

















  <div class="online">
    <div v-if="this.active===1||this.active<=1">
      <el-button type="primary" icon="el-icon-arrow-left" style="margin-top: 12px;margin-left: 10px" disabled>上一步</el-button>
    </div>
    <div v-if="active>1||active!=1">
      <el-button type="primary"  icon="el-icon-arrow-left" style="margin-top: 12px;margin-left: 10px" @click="last">上一步</el-button>
    </div>
    <div v-if="this.active<3">
      <el-button  type="primary" style="margin-top: 12px;margin-left: 10px"@click="next">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>

    <div v-if="this.active===3">
      <el-button  type="primary" style="margin-top: 12px;margin-left: 10px" @click="submitPro">提  交</el-button>
    </div>
  </div>







  <!-- 选择商品界面二级弹出框 -->
  <el-dialog title="选择商品" :visible.sync="openSecond" width="800px" append-to-body>
    <el-form ref="proForm" :model="proForm"  label-width="80px">
      <el-form-item label="商品分类" prop="typeId">
        <div class="block">
          <el-cascader
            :options="checkItem"
            :props="{ checkStrictly: true , value:'id' , label:'name'}"
            :value='checkItem.id'
            :label="checkItem.name"
            clearable></el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="商品搜索" prop="name">
        <el-input v-model="proForm.name"/>
      </el-form-item>
    </el-form>


    <el-table
      :data="showItemList"
      height="250"
      border
      style="width: 100%">
      <el-table-column prop="pid" width="30">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id"  @input="checkPro(scope.row)"></el-radio>
      </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品id"
        width="180">
      </el-table-column>
      <el-table-column label="图片" align="center" prop="carousel" width="199">
        <template slot-scope="scope">
          <image-preview :src="scope.row.carousel" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="商品名称"
        width="380">
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitPro">提 交</el-button>
    </div>
    <pagination
      v-show="prototal>0"
      :total="prototal"
      :page.sync="showItemList.pageNum"
      :limit.sync="showItemList.pageSize"
      @pagination="findAllItem"
    />
  </el-dialog>

</div>
</template>
<script>
import {getItem, listItem} from "@/api/product/pro";
import {listPro} from "@/api/system/pro";
import {getSpecificationList} from "@/api/sset/specification";
import {addProduct, getProduct, updateProduct} from "@/api/points/pointsProduct";

export default {
  created() {
    if (this.$route.query.id) {
      this.flag='更新';
      this.id=this.$route.query.id;
      getProduct(this.id).then(response => {
        this.proImageUrl=response.data.img;
        this.fuckyou='<img src="'+this.proImageUrl+'">';
        this.theSecondForm.shopName=response.data.name;
        this.theSecondForm.unit=response.data.unit;
        this.theSecondForm.weight=response.data.weight;
        this.theSecondForm.shopStatus=response.data.status;
        this.theBigForm = response.data;
      });

      console.log(this.proImageUrl)
    }
    this.findAllItem();
    this.getItem();
    this.getStats(this.proId);
  },
  data() {
    return {
      fuckyou: '',
      // 查找的id
      id:'',
      flag:'添加',
      // 最终发送给后台的表单
      theBigForm:{},
      // 条件查询的
      checkItem:[],
      speList:[],
      // 第一个步骤进行商品添加时查询list的赋值数组
      showItemList:[],
      openSecond:false,
      // 商品弹出框表单的form对象
      proForm:{},
      // 保存img回显的数据，不用这个了，直接用字符串proImageUrl进行展示
      // 商品id
      proId:'',
      saveImg:{},
      // 分页数据
      prototal:0,
      active: 1,
      thrFirstForm:{},
      theSecondForm:{},
      theThirdForm:{},
      proImageUrl:'',
      defaultValue: '1',
    //   用来存放规格id的
      itemIdStr:'',
      editorOption: {
        // 占位配置
        placeholder: '请输入...',
        height: '300px',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['link', 'image', 'video'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }], // 文字颜色按钮
          ],
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        }
      },
    };
  },

  methods: {
    checkspeListId(row){
      console.log(row.id+"===")
        this.theBigForm.specificationId=row.id;
    },
    updateValue(value){
      this.defaultValue = value; // 更新默认值
    },
    getShop(id){
      getItem(id).then(response => {
        this.theSecondForm=response.data;
      })
    },
    // 读取所有规格
    getStats(id){
      getSpecificationList(id).then(response => {
        this.speList=response.data;
      })
    },
    checkPro(row){

      this.proForm.proId=row.id;
      // 获取这一行的img图片传给div进行展示
      this.proImageUrl=row.carousel;
      this.fuckyou='<img src="'+this.proImageUrl+'">';
      this.theBigForm.img=row.carousel;
      this.theBigForm.proId=row.id;
      this.proId=row.id;
      this.getShop(this.proId);
      console.log(this.proImageUrl)
      this.openSecond=false;
    },
    // 获取规格
    getItem(){
      listPro().then(response => {
        this.checkItem=response.rows;
      })
    },
    // 商品添加界面
    findAllItem(){
      listItem(this.proForm).then(response => {
        this.prototal=response.total;
        this.showItemList=response.rows;
      })
    },
    proIcBoxOnclick(){
      this.checkboxImg=[];
      this.checkboxId=[];
      this.openSecond=true;
    },
    next() {
      if(this.active<3){
        this.active=this.active+1
      }
    },
    submitPro(){
      this.theBigForm.name=this.theSecondForm.shopName;
      this.theBigForm.weight= this.theSecondForm.weight;
      this.theBigForm.unit= this.theSecondForm.unit;
      console.log(this.theBigForm.unit+"]]]")
      this.theBigForm.needPoints= this.speList.needPoints;
      console.log(this.speList.needPoints+"this.speList.needPoints")
      this.theBigForm.sillSum=this.speList.sillSum;
      console.log(this.speList.sillSum)
      this.theBigForm.sillNum=this.theBigForm.sillSum;
      if(this.flag=='添加'){
        addProduct(this.theBigForm).then(response => {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        })
      }else if(this.flag=='更新'){
          updateProduct(this.theBigForm).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          })
      }

    },
    last(){
      if(this.active>1){
        this.active=this.active-1
        console.log(this.active)
      }
    }

  }
}
</script>

<style scoped lang="scss">
.goCenter{
  margin: 0 auto;
  width: 500px;
}
.online{
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: nowrap; /* 不换行，横向展示 */
}
.proIcBox{
  margin-top: 20px;
  margin-left: 28px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, .1);
  border-radius: 4px;
  background: rgba(0, 0, 0, .02);
}
.el-icon{
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  margin-left: 18px;
}
.spq{
  width: 1000px;
  height: 80px;
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: nowrap; /* 不换行，横向展示 */
  margin-top: -20px;
}
</style>
